<template>
  <div id="result">
    <view-box>

      <x-header slot="header">投票结果</x-header>

      <tab :animate="false" :line-width="3">
        <tab-item active-class="active-1" selected @on-item-click="onItemClick">柱状图</tab-item>
        <tab-item active-class="active-2" @on-item-click="onItemClick">饼图</tab-item>
        <tab-item active-class="active-3" @on-item-click="onItemClick">列表</tab-item>
      </tab>

      <div style="padding-top:56px;">
        <!-- <v-chart ref="chartBar" :height="chartHeight" :data="chartData" v-show="show === 0">
          <v-bar />
          <v-tooltip :show-item-marker="false" />
        </v-chart> -->

        <v-chart ref="chartBar" :height="chartHeight" prevent-render @on-render="renderChart" v-show="show === 0">
        </v-chart>

        <v-chart ref="chartPie" :height="chartHeight" :data="chartData" v-show="show === 1">
          <v-scale y :options="yOptions" />
          <v-tooltip disabled />
          <v-pie :radius="0.85" series-field="name" />
          <v-legend :options="legendOptions" />
        </v-chart>

        <div v-show="show === 2">
          <group v-for="item in chartData" :key="item.num">
            <group-title>选项{{ item.num }}<span style="float:right;">{{ item.content }}</span></group-title>
            <group-title><span v-for="(user, index) in item.person" :key="user">{{user}}<span v-if="(item.person.length!=index+1)">、</span></span></group-title>
          </group>
        </div>
      </div>

    </view-box>
  </div>
</template>

<style lang='less'>
  #result {
    height: 100%;
    background-color: #fbf9fe;
    .vux-header {
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1000;
    }
    .vux-tab-container {
      width: 100%;
      position: fixed;
      left: 0;
      top: 46px;
      z-index: 1000;
    }
    .active-1 {
      color: rgb(252, 55, 140) !important;
      border-color: rgb(252, 55, 140) !important;
    }
    .active-2 {
      color: #04be02 !important;
      border-color: #04be02 !important;
    }
    .active-3 {
      color: rgb(55, 174, 252) !important;
      border-color: rgb(55, 174, 252) !important;
    }
  }
</style>

<script>
  import {
    Group,
    GroupTitle,
    XHeader,
    ViewBox,
    Tab,
    TabItem,
    VChart,
    VTooltip,
    VLegend,
    VBar,
    VPie,
    VScale
  } from "vux";
  import { mapActions } from "vuex";

  export default {
    name: "Result",
    props: ["voteId"],
    components: {
      GroupTitle,
      Group,
      XHeader,
      ViewBox,
      Tab,
      TabItem,
      VChart,
      VTooltip,
      VLegend,
      VBar,
      VPie,
      VScale
    },
    data() {
      return {
        chartHeight: 0,
        show: 0,
        map: {},
        legendOptions: {
          position: "right",
          // align: "center",
          itemFormatter(val) {
            // debugger;
            return `${val}`;
          }
        },
        yOptions: {
          formatter(val) {
            return val * 100 + "%";
          }
        }
      };
    },
    computed: {
      chartData() {
        let data = [];
        const options = this.$store.state.vote.currentVote.options;
        const results = this.$store.state.result.voteResultList;
        console.log(1)
        console.log(results)
        if(options && results) {
          data = options.map((option, index) => {
            return {
              // name: option.value,
              name: `选项${index + 1}`,
              num: index + 1,
              _id: option.key,
              count: 0,
              content: option.value,
              a: "1",
              person: []
            };
          });
          for(let item of data) {
            for(let result of results) {
              if(result.optionId === item._id) {
                item.count++;
                item.person.push(result.voterAccount);
              }
            }
          }
          for(let item of data) {
            delete item._id;
            // item.percent = (item.count / results.length).toFixed(2);
            item.percent = item.count / results.length;
            item.name += ` ${item.percent.toFixed(2) * 100 + "%"}`;
          }
        }
        return data;
      }
    },
    created() {
      this.reqGetVoteResultById({
        id: this.voteId
      });
    },
    mounted() {
      this.chartHeight = document.documentElement.clientHeight * 0.65;
    },
    methods: {
      ...mapActions(["reqGetVoteResultById"]),
      onItemClick(index) {
        console.log(index);
        this.show = index;
        switch(index) {
          case 0:
            this.$refs.chartBar.rerender();
            break;
          case 1:
            this.$refs.chartPie.rerender();
            break;
        }
      },
      renderChart({
        chart
      }) {
        // debugger;
        chart.coord("polar", {
          transposed: true,
          endAngle: 2 * Math.PI,
          startAngle: Math.PI / 2,
          innerRadius: 0.3
        });

        chart.source(this.chartData, {
          // percent: {
          //   max: 100
          // }
        });
        chart.axis("name", {
          grid: {
            lineDash: null,
            type: "arc"
          },
          line: null,
          label: {
            fontSize: 12,
            // fontWeight: "bold",
            fill: "rgb(252, 55, 140)"
          }
        });
        chart.axis("percent", false);
        chart.tooltip(false);
        chart
          .interval()
          .position("name*percent")
          .color("rgb(252, 55, 140)");

        chart.render();
      }
    }
  };
</script>
